<template>
  <div class="main main-add-supply">
    <div class="part">
      <div class="p-title">
        <div class="title">查看中心药房</div>
      </div>
      <div class="p-cont">
        <el-form
          :model="form"
          :rules="rules"
          label-width="220px"
          ref="ruleFormRef"
        >
          <div class="sub-title">
            <el-divider content-position="left">基础信息</el-divider>
          </div>
          <div class="sub-cont" />
          <el-form-item prop="name">
            <template #label
              >中心药房名称
              <MyToolTip
                color="#606266"
                content="请填入该药房实体的全称便于您记录管理，不超过50个汉字。\n此项字段不会对外展示。"
            /></template>
            <el-input v-model="form.name" placeholder="请输入中心药房名称" />
          </el-form-item>
          <el-form-item prop="brief">
            <template #label
              >对外展示名称
              <MyToolTip
                color="#606266"
                content="请填入便于居民用户理解并符合规范要求的名字，不超过50个汉字。\n此项字段将作为药房名称展示在万户医学院App上。"
            /></template>
            <el-input v-model="form.brief" placeholder="请输入对外展示名称" />
          </el-form-item>
          <el-form-item prop="contract">
            <template #label
              >联系人
              <MyToolTip
                color="#606266"
                content="请填入实体药房的联系人姓名，不超过10个汉字。\n此项字段不会对外展示。"
            /></template>
            <el-input v-model="form.contract" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item prop="phone">
            <template #label
              >联系电话
              <MyToolTip
                color="#606266"
                content="请填入联系人电话或手机号，不超过20个数字。\n此项字段不会对外展示。"
            /></template>
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item prop="address">
            <template #label
              >联系地址
              <MyToolTip
                color="#606266"
                content="请填入实体药房的运营地址，不超过100个汉字。\n此项字段不会对外展示。"
            /></template>
            <elui-china-area-dht
              @change="proCitySelectChange"
              placeholder="请选择省市区"
            />
          </el-form-item>
          <el-form-item prop="detailAddress">
            <el-input
              v-model="detailAddress"
              placeholder="请填写详细地址"
              @change="detailAddChange"
            />
          </el-form-item>
          <el-form-item prop="lonlat">
            <template #label
              >经纬度坐标
              <MyToolTip
                color="#606266"
                content="请填入实体药房的经纬度，用于进行物流调度服务。"
            /></template>
            <el-input v-model="form.lonlat" placeholder="经度,纬度" />
            <div class="tip">
              <a
                target="_blank"
                href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
                >点此使用百度坐标拾取工具</a
              >获取坐标数据
            </div>
          </el-form-item>
          <el-form-item prop="supplyArea">
            <template #label
              >供应区域
              <MyToolTip
                color="#606266"
                content="请填入该中心药房服务的区域。一个中心药房可同时服务同省、市下的多个区域，不可同时选择不同级别区域或不同省、市下的区域；同一区域下，只可绑定一个中心药房提供服务。"
            /></template>
            <el-select
              filterable
              v-model="form.supplyArea"
              placeholder="请选择供应区域"
            >
              <el-option
                v-for="item in supplyAreaList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <div class="sub-title">
            <el-divider content-position="left"
              >药品追溯（药品电子监管码）<MyToolTip
                color="#606266"
                content="药品追溯是通过药品的电子监管系统，对药品的生产和流通环节进行全程监管，出现问题就可以进行责任追溯的系统，本系统当前支持阿里健康“码上放心”平台，只需填入平台追溯ID和凭条税负refld即可使用药品追溯。"
            /></el-divider>
          </div>
          <el-form-item label="">
            <template #label>药品追溯 </template>
            <el-switch v-model="form.zsOpen" />
          </el-form-item>
          <el-form-item label="" prop="zsId">
            <template #label>追溯ID </template>
            <el-input v-model="form.zsId" placeholder="请填写追溯ID" />
          </el-form-item>
          <el-form-item prop="zsRefId">
            <template #label>追溯refld </template>
            <el-input v-model="form.zsRefId" placeholder="请填写追溯refld" />
          </el-form-item>
          <div class="sub-title">
            <el-divider content-position="left"
              >规律用药规则<MyToolTip
                color="#606266"
                content="设置规律用药的规则，符合规则内的药品订单将被判定为规律用药。建议各参数使用以下数值：\n规律标准延后时长（天）：3\n用量向上调整限数（盒）：1\n用量向下调整限数（盒）：1\n续订通知生成前置时长（天）：3"
            /></el-divider>
          </div>
          <el-form-item prop="glDelay">
            <template #label>规律标准延后时长（天） </template>
            <el-input v-model.number="form.glDelay" placeholder="请填写数字" />
          </el-form-item>
          <el-form-item prop="glUpNum">
            <template #label>用量向上调整限数（盒） </template>
            <el-input v-model.number="form.glUpNum" placeholder="请填写数字" />
          </el-form-item>
          <el-form-item prop="glDownNum">
            <template #label>用量向下调整限数（盒） </template>
            <el-input
              v-model.number="form.glDownNum"
              placeholder="请填写数字"
            />
          </el-form-item>
          <el-form-item prop="glNoticeDay">
            <template #label>续订通知生成前置时长（天） </template>
            <el-input
              v-model.number="form.glNoticeDay"
              placeholder="请填写数字"
            />
          </el-form-item>
          <div class="sub-title">
            <el-divider content-position="left">物流配送</el-divider>
          </div>
          <el-form-item prop="expressFirm">
            <template #label
              >配送商
              <MyToolTip
                color="#606266"
                content="平台已接入的第三方配送商包括顺丰速运和京东快递，选择第三方配送需填入月结卡号，请确认已与相关第三方配送商达成商务合作；自行配送或无法确认配送商，请选择“自营配送”"
            /></template>
            <el-radio-group v-model="form.expressFirm">
              <el-radio value="0" label="自营配送" />
              <el-radio value="1" label="顺丰速运" />
              <el-radio value="2" label="京东快递" />
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="expressCardNum" v-if="form.expressFirm !== '0'">
            <template #label
              >月结卡号
              <!-- <MyToolTip
                color="#606266"
                content="新增预约服务（次）\n指标定义：今日0点截止当前时间，新增的状态正常的用药管理计划单的数量。"
            /> -->
            </template>
            <el-input
              v-model.number="form.expressCardNum"
              placeholder="请填写数字"
            />
          </el-form-item>
          <el-form-item prop="expressMoney">
            <template #label
              >每单运费（元）
              <MyToolTip
                color="#606266"
                content="每个订单收取用户的固定配送费用，仅支持正整数。"
            /></template>
            <el-input
              v-model.number="form.expressMoney"
              placeholder="请填写数字"
            />
          </el-form-item>

          <el-form-item class="flex-inline" prop="expressNum">
            <template #label
              >免运费
              <MyToolTip
                color="#606266"
                content="平台支持订单满减运费功能，打开免运费功能并设置满减线后，用药订单金额大于’于满减线，则该订单的配送费自动变为0。"
            /></template>
            <el-switch v-model="form.isNoMoney" />
            <div class="express-num" v-if="form.isNoMoney">
              <span>订单金额>=</span
              ><el-input
                v-model.number="form.expressNum"
                placeholder="请填写数字"
              /><span>元时，免配送费</span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              size="large"
              >提交</el-button
            >
            <el-button @click="resetForm(ruleFormRef)" size="large"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { EluiChinaAreaDht } from "elui-china-area-dht";
import type { FormInstance } from "element-plus";
import MyToolTip from "@/components/myToolTip.vue";
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat;
const route = useRoute();
const editType = ref<"add" | "edit" | "check">("check");
const editId = ref<string | number | null>(null);
const ruleFormRef = ref<FormInstance>(null);
const form = reactive({
  name: "",
  brief: "",
  contract: "",
  phone: "",
  address: "",
  lonlat: "",
  supplyArea: "",
  zsOpen: true,
  zsId: "",
  zsRefId: "",
  glDelay: "",
  glUpNum: "",
  glDownNum: "",
  glNoticeDay: "",
  expressFirm: "自营配送",
  expressMoney: "",
  expressCardNum: "",
  isNoMoney: true,
  expressNum: ""
});
const proCityCountry = ref<string>("");
const detailAddress = ref<string>("");
const rules = reactive({
  name: [
    {
      required: true,
      message: "中心药房名称不能为空,且长度不能超过50个汉字",
      trigger: "blur",
      min: 1,
      max: 50
    }
  ],
  brief: [
    {
      required: true,
      message: "对外展示名称不能为空,且长度不能超过50个汉字",
      trigger: "blur",
      min: 1,
      max: 50
    }
  ],
  contract: [
    {
      required: true,
      message: "联系人不能为空,且长度不能超过10个汉字",
      trigger: "blur",
      min: 1,
      max: 10
    }
  ],
  phone: [
    {
      required: true,
      message: "联系电话不能为空，且长度不超过20",
      trigger: "blur",
      min: 1,
      max: 20
    }
  ],
  // address: [
  //   { required: true, message: "省市区不能为空", trigger: "blur" },
  //   {
  //     validator: (rule: any, value: any, callback: any) => {
  //       console.log("address rule:", rule);
  //       console.log("address value:", value);
  //       callback();
  //     }
  //   }
  // ],
  detailAddress: [
    {
      required: true,
      message: "联系地址不能为空,且长度不超过100",
      trigger: "blur",
      min: 1,
      max: 100
    }
  ],
  lonlat: [{ required: true, message: "经纬度不能为空", trigger: "blur" }],
  expressFirm: [{ required: true, message: "经纬度不能为空", trigger: "blur" }],
  supplyArea: [
    { required: true, message: "供应区域不能为空", trigger: "blur" }
  ],
  zsId: [{ required: true, message: "追溯ID不能为空", trigger: "blur" }],
  zsRefId: [{ required: true, message: "追溯refld不能为空", trigger: "blur" }],
  glDelay: [
    { required: true, message: "规律标准延后时长不能为空", trigger: "blur" }
  ],
  glUpNum: [
    { required: true, message: "用量向上调整限数不能为空", trigger: "blur" }
  ],
  glDownNum: [
    { required: true, message: "用量向下调整限数不能为空", trigger: "blur" }
  ],
  glNoticeDay: [
    { required: true, message: "续订通知生成前置时长不能为空", trigger: "blur" }
  ],
  expressMoney: [
    { required: true, message: "每单运费不能为空", trigger: "blur" }
  ],
  expressCardNum: [
    { required: true, message: "月结卡号不能为空", trigger: "blur" }
  ],
  expressNum: [{ required: true, message: "订单金额不能为空", trigger: "blur" }]
});

const supplyAreaList = ref([
  {
    value: 1,
    label: "北京"
  },
  {
    value: 2,
    label: "上海"
  }
]);

function proCitySelectChange(e) {
  console.log("e:", e);
  const pro = chinaData[e[0]];
  const city = chinaData[e[1]];
  const country = chinaData[e[2]];
  console.log(pro, city, country);
  proCityCountry.value = pro.label + city.label + country.label;
  form.address = proCityCountry.value + detailAddress.value;
  console.log("proCityCountry:", proCityCountry.value);
}

function detailAddChange() {
  form.address = proCityCountry.value + detailAddress.value;
}

function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) {
    return;
  }

  formEl.validate(valid => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
}
function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) {
    return;
  }
  formEl.resetFields();
}
onBeforeMount(() => {
  editId.value = route.query.id as string;
  editType.value = route.query.type as "add" | "edit" | "check";
});
onMounted(() => {});
</script>
<style>
.main-add-supply .el-divider__text {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.main-add-supply .el-divider__text span {
  margin: 0px 5px;
}

.main-add-supply .el-divider__text .question-icon {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.p-cont {
  .sub-title {
    margin: 60px auto;
  }

  .el-form-item {
    width: 600px;

    ::v-deep(.el-form-item__label) {
      display: flex;
      align-items: center;
    }

    .tip {
      cursor: pointer;

      a {
        color: blue;
      }
    }

    &.flex-inline {
      ::v-deep(.el-form-item__content) {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .express-num {
          margin-left: 20px;

          span {
            margin: auto 10px;
          }
        }

        .el-input {
          width: 100px;
        }
      }
    }
  }
}
</style>
